<style>

    /*这个页面上的表格的样式*/
    #tree_configure_table .th-inner {
        text-align: center;
        height: 36px;
        line-height: 36px;
        font-size: 13px;
        padding: 0 !important;
        background-color: #F1F1F1;
        border: 0 !important;
    }

    #tree_configure_table {
        border: 0 !important;
    }

    #tree_configure_table tr {
        border: 0;
        border-bottom: 1px solid #ddd;
        border-left: 1px solid #ddd;
    }

    #tree_configure .fixed-table-container {
        border: 0;
    }
    #tree_configure .fixed-table-container tbody td ,  #tree_configure .fixed-table-container, #tree_configure .table, #tree_configure .table>tbody>tr>th, #tree_configure .table>tfoot>tr>th, #tree_configure .table>thead>tr>th{
        border:0px;
        border-left: 1px solid #ddd;
    }
    #tree_configure .table>tbody>tr>td, #tree_configure .table>tfoot>tr>td, #tree_configure .table>thead>tr>td {
        border-bottom:1px;
    }
</style>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">算法部署</h4>
</div>
<form id="defaultForm" method="post" class="form-horizontal" action="/project/accountManage/deploy_save">
    <div class="modal-body">
        <div style="width: 100%;min-height: 200px;overflow:auto; max-height: 500px">
            <div class="col-xs-3" style="padding: 0">
                <div style="height: 37px; line-height: 37px; font-weight: bolder; font-size: 13px; border-bottom: 1px solid #ddd; text-align: center;background-color: #F1F1F1;">电池包名称</div>
                <div class="zTreeDemoBackground left">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
            </div>
            <div class="col-sm-9" style="padding: 0" id="tree_configure">
                <table id="tree_configure_table" class="table"></table>
            </div>
        </div>
        <input type="hidden" id="id" th:value="${id}">
        <input type="hidden" id="list" th:value="${list}">


    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary">保存</button>
    </div>
</form>


<!--ztree相关方法 未完成部分见TODO注释-->
<script>
    var setting = {
        check: {
            enable: true
        },
        view: {
            showIcon: false,        // 是否显示节点的图标
            txtSelectedEnable: true
//            addHoverDom: addHoverDom,   //鼠标移上去的时候
//            removeHoverDom: removeHoverDom  // 鼠标移开之后
        },
        data: {
            simpleData: {
                enable: true,       // 使用简单数据模式
                idKey: "id",        // 节点数据中保存唯一标识的属性名称
                pIdKey: "pId",      // 节点数据中保存其父节点唯一标识的属性名称
                rootPId: ""         // 用于修正根节点父节点数据 默认值：null
            }
        },
        callback: {
            onRename: function (event, treeId, treeNode) {//重命名之后触发的事件
                console.log(treeNode.id + "  修改名称为  " + treeNode.name + "   父id为  " + treeNode.tId);
                /**
                 * TODO 这边是保存的请求
                 * 需要注意的事情:
                 *      1. 新增的情况：
                 *          1）treeNode的id在数据库中没有
                 *          2）有treeNode的id但是tid和数据库中保存的父id不一致
                 *      2. 重命名的情况：
                 *          treeNode的id在数据库中已存在的话，并且tId与父id一致
                 * 原因：无论是单个新增，还是重命名走的都是这边，所以这边的treeNode.id并不代表数据库的id，只是页面上临时新增的id
                 * 另外：保存完以后需要重新返回树并重新加载树
                 */
            },
            onRemove: function (event, treeId, treeNode) {//删除节点之后的动作
                console.log(treeNode.id + "  删除");
                /**
                 * TODO 删除的请求还没写
                 * 这边因为树都是重新加载好的，与数据库中的id一致，所以删除的id就是treeNode.id
                 */
            }
        }
    };

    var zNodes = [
        {"name": "大拇指大厦", "pId": 0, "id": 1, "type": 1 },
        {"name": "1#电池包", "pId": 1, "id": 2, "type": 2},
        {"name": "2#电池包", "pId": 1, "id": 3, "type": 3},
        {"name": "3#电池包", "pId": 1, "id": 4, "type": 4},
    ];

    $(document).ready(function () {
        var treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        treeObj.expandAll(true);    // 设置默认展开
    });
</script>
<!--dataTable-->
<script>
    var list = eval('(' + $("#list").val() + ')');

    alert(list);
    /**
     * 实时数据 中的 故障信息 中的 表格的table字段格式
     */
    var tree_configure_table_format = [
        {
            field: 'id',
            title: 'id',
            visible: false
        },
        {
            field: 'name',
            title: '品牌',
            formatter: function (value, row, index) {
                if (index == 0 ) {
                    return "";
                }
                if ($.inArray(row.id, list) != -1) {
                    return value;
                } else {
                    return '';
                }
            }
        },
        {
            field: 'type',
            title: '选择算法',
            formatter: function (value, row, index) {
                if (index == 0 ) {
                    return "<input type='checkbox'><label>全选</label>";
                } else if ($.inArray(row.id, list) != -1) {
                    return "<input type='checkbox'><label>全选</label>"+
                        "<input type='checkbox'><label>SOH定标算法</label>"+
                        "<input type='checkbox'><label>SOH矫正算法1</label>"+
                        "<input type='checkbox'><label>SOH矫正算法2</label>";
                } else {
                    return '';
                }
            }
        }
    ];

    $(function () {
        console.log(list);
        $("#tree_configure_table").bootstrapTable({
            queryParamsType: "id",
            columns: tree_configure_table_format,
            url: "/project/accountManage/deploy_edit_data"
        });
    });
</script>